<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件预览功能测试</title>
    <!-- 引入ElementPlus样式 -->
    <link rel="stylesheet" href="./css/ElementPlus/index.css"/>
    <!-- 引入 Vue 3 -->
    <script src="./js/vue3/index.js"></script>
    <!-- 引入ElementPlus js代码 -->
    <script src="./js/elementplus/index.js"></script>
    <script src="./js/elementplus/icons.js"></script>
    <!-- 引入性能优化工具 -->
    <script src="./js/performanceOptimizer.js"></script>
    <!-- 引入文件预览组件 -->
    <script src="./js/filePreview.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/filePreview.css"/>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .test-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .test-item {
            text-align: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .test-item:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
        }
        .test-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
        .test-item .filename {
            margin-top: 10px;
            font-size: 14px;
            word-break: break-all;
        }
        .test-item .filetype {
            margin-top: 5px;
            font-size: 12px;
            color: #666;
        }
        .cache-stats {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
        }
        .controls {
            margin-bottom: 20px;
            text-align: center;
        }
        .controls button {
            margin: 0 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="test-container">
        <h1>文件预览功能测试</h1>
        
        <div class="controls">
            <el-button @click="showCacheStats" type="info">显示缓存统计</el-button>
            <el-button @click="clearCache" type="warning">清空缓存</el-button>
            <el-button @click="simulateMemoryPressure" type="danger">模拟内存压力</el-button>
        </div>
        
        <div v-if="cacheStats" class="cache-stats">
            <h3>缓存统计信息：</h3>
            <p><strong>图片缓存：</strong> {{ cacheStats.images }} 个</p>
            <p><strong>视频缓存：</strong> {{ cacheStats.videos }} 个</p>
            <p><strong>音频缓存：</strong> {{ cacheStats.audios }} 个</p>
            <div v-if="cacheStats.memory !== 'Not available'">
                <p><strong>内存使用：</strong> {{ cacheStats.memory.used }} / {{ cacheStats.memory.total }} (限制: {{ cacheStats.memory.limit }})</p>
            </div>
        </div>
        
        <div class="test-grid">
            <div 
                v-for="(file, index) in testFiles" 
                :key="index"
                class="test-item"
                @click="openPreview(index)"
            >
                <img :src="file.cover" :alt="file.file_name" />
                <div class="filename">{{ file.file_name }}</div>
                <div class="filetype">{{ getFileTypeName(file.type) }}</div>
            </div>
        </div>
    </div>
    
    <!-- 文件预览组件 -->
    <file-preview 
        :visible="previewVisible" 
        :files="testFiles" 
        :current-index="previewIndex"
        @update:visible="previewVisible = $event"
        @update:current-index="previewIndex = $event"
    ></file-preview>
</div>

<script>
const { createApp, ref, onMounted } = Vue;

const App = {
    setup() {
        const previewVisible = ref(false);
        const previewIndex = ref(0);
        const cacheStats = ref(null);
        
        // 测试文件数据
        const testFiles = ref([
            {
                id: 1,
                file_name: "测试图片1.jpg",
                type: 1,
                cover: "https://picsum.photos/800/600?random=1",
                size: "1.2MB"
            },
            {
                id: 2,
                file_name: "测试图片2.jpg",
                type: 1,
                cover: "https://picsum.photos/800/600?random=2",
                size: "2.1MB"
            },
            {
                id: 3,
                file_name: "测试视频1.mp4",
                type: 7,
                cover: "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4",
                size: "5.6MB"
            },
            {
                id: 4,
                file_name: "测试音频1.mp3",
                type: 6,
                cover: "https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3",
                size: "3.2MB"
            },
            {
                id: 5,
                file_name: "测试图片3.jpg",
                type: 1,
                cover: "https://picsum.photos/800/600?random=3",
                size: "1.8MB"
            },
            {
                id: 6,
                file_name: "不支持的文件.txt",
                type: 2,
                cover: "./resource/img/txt.png",
                size: "1KB"
            }
        ]);
        
        const openPreview = (index) => {
            previewIndex.value = index;
            previewVisible.value = true;
        };
        
        const showCacheStats = () => {
            if (window.optimizerUtils && window.optimizerUtils.getCacheStats) {
                cacheStats.value = window.optimizerUtils.getCacheStats();
            } else {
                ElementPlus.ElMessage.warning('性能优化工具未加载');
            }
        };
        
        const clearCache = () => {
            if (window.performanceOptimizer && window.performanceOptimizer.clearAllCaches) {
                window.performanceOptimizer.clearAllCaches();
                ElementPlus.ElMessage.success('缓存已清空');
                showCacheStats();
            } else {
                ElementPlus.ElMessage.warning('性能优化工具未加载');
            }
        };
        
        const simulateMemoryPressure = () => {
            // 创建大量数据模拟内存压力
            const largeArray = [];
            for (let i = 0; i < 100000; i++) {
                largeArray.push(new Array(1000).fill(Math.random()));
            }
            
            ElementPlus.ElMessage.info('已模拟内存压力，请检查控制台');
            console.log('模拟内存压力数据：', largeArray.length);
            
            // 触发缓存清理
            setTimeout(showCacheStats, 2000);
        };
        
        const getFileTypeName = (type) => {
            const typeNames = {
                1: '图片',
                2: '文本',
                6: '音频',
                7: '视频'
            };
            return typeNames[type] || '未知';
        };
        
        onMounted(() => {
            console.log('测试页面已加载');
            console.log('性能优化工具：', window.performanceOptimizer ? '已加载' : '未加载');
            console.log('预览组件：', window.FilePreview ? '已加载' : '未加载');
        });
        
        return {
            previewVisible,
            previewIndex,
            testFiles,
            cacheStats,
            openPreview,
            showCacheStats,
            clearCache,
            simulateMemoryPressure,
            getFileTypeName
        };
    }
};

const app = createApp(App);

// 注册ElementPlus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

// 注册文件预览组件
if (window.FilePreview) {
    app.component('FilePreview', FilePreview);
}

app.use(ElementPlus);
app.mount('#app');
</script>
</body>
</html>